<template>
  <div class="comments-item">
    <div class="pull-left">
      <img class="avatar-32" :src="author.avatar || defaultAvatar" alt="default" @click="handleClickAvatar" />
    </div>
    <div class="comments-box">
      <div class="comments-trigger">
        <div class="pull-right comments-option">
          <a href="javascript:void(0)" class="ml10" data-placement="top" :title="item.title" v-for="item in tools"
            :key="item.name" v-show="item.is_audit" @click="handleClickTool($event, item)">
            <i :class="item.icon" v-if="item.icon"></i>
            <span v-if="item.text">{{ item.text }}</span>
          </a>
        </div>
        <strong>
          <router-link v-if="author.id != 0" :to="{ path: `/user/${author.id}/article` }" target="_blank"
            @click="handleClickAuthor">{{ author.nickname }}</router-link>
          <a v-if="author.id == 0" @click="handleClickAuthor">{{ author.nickname }}</a>
        </strong>
        <span class="comments-date">· {{ $filters.filterTimeYmdHms(time) }}</span>
      </div>
      <div class="comments-content">
        <p v-html="commentContent"></p>
      </div>
      <p class="comments-ops">
        <span class="comments-reply-btn ml15" @click="handleAddReply" v-show="isAudit">
          <el-icon>
            <Comment />
          </el-icon>
          {{ replyText }}
        </span>
        <el-popconfirm v-show="user != null && author.id == user.id" :width="200"
          :title="hasReply ? '删除评论后，评论下的所有回复都会被删除!' : '确认删除此评论'" @confirm="handleDeleteReply">
          <template #reference>
            <span class="comments-reply-btn ml15">
              <el-icon>
                <Delete />
              </el-icon>
              删除
            </span>
          </template>
        </el-popconfirm>
      </p>
      <div class="comment-input" v-show="replyVisible">
        <slot name="comment-input"></slot>
      </div>
      <div class="reply-list" v-show="hasReply">
        <slot name="reply-list"></slot>
      </div>
    </div>
  </div>
</template>

<script>
  import Utils from '@/lin/util/util'
  import defaultAvatar from '@/assets/image/user/user.png'
  export default {
    name: 'CommentItem',
    props: {
      avatar: String,
      author: {
        type: Object,
      },
      content: String,
      tools: Array,
      time: [String, Number],
      hasReply: Boolean,
      replyVisible: {
        type: Boolean,
        default: false,
      },
      isAudit: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        // replyVisible: false
        defaultAvatar,
      }
    },
    computed: {
      replyText() {
        return this.replyVisible == true ? '取消回复' : '回复'
      },
      commentContent() {
        return Utils.formatHtml(Utils.formatHyperLink(this.content))
      },
      user() {
        return this.$store.state.user
      },
    },
    methods: {
      handleClickAvatar(event) {
        event.stopPropagation()
        this.$emit('clickAvatar', this)
      },
      handleClickTool(event, tool) {
        event.stopPropagation()
        this.$emit('clickTool', this, tool)
      },
      handleClickAuthor(event) {
        event.stopPropagation()
        // this.$notify({
        //   title: '警告',
        //   message: '该用户已被系统删除·',
        //   type: 'warning',
        // })
        this.$emit('clickAuthor', this)
      },
      handleAddReply(event) {
        event.stopPropagation()
        this.$emit('addReply', this)
      },
      handleDeleteReply(event) {
        this.$emit('deleteReply', this)
      },
    },
    filters: {},
  }
</script>

<style lang="scss" scoped>
  img {
    border: 0;
    vertical-align: middle;
  }

  .ml10 {
    margin-left: 10px !important;
  }

  .ml15 {
    margin-left: 15px !important;
  }

  .comments-item {
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    font-size: 14px;
  }

  .pull-left {
    float: left !important;
  }

  .pull-right {
    float: right !important;
  }

  .avatar-32 {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }

  .avatar-32:hover {
    cursor: pointer;
  }

  .comments-item a {
    color: #009a61;
    text-decoration: none;
    background: transparent;
  }

  .comments-item a:hover,
  .comments-item a:active,
  .comments-item a:focus {
    outline: 0;
  }

  .comments-box {
    padding-left: 47px;
  }

  .comments-box strong {
    font-weight: bold;
  }

  .comments-trigger {
    margin-bottom: 10px;
    color: #999;
    font-size: 13px;
  }

  .comments-ops {
    .comments-reply-btn:hover {
      cursor: pointer;
      color: #5cb6ff;
    }
  }

  .comments-content {
    line-height: 1.6;
    word-wrap: break-word;
    margin-bottom: 10px !important;
  }

  .comments-content::before,
  .comments-content::after {
    display: table;
  }

  .comments-content::after {
    content: '';
    clear: both;
  }

  .comments-ops {
    margin: 0;
    color: #999;
    font-size: 13px;
  }

  .comments-reply-btn {
    color: #999;
    cursor: pointer;
  }

  .comment-input {
    margin-top: 1.083rem;
    position: relative;
    padding: 1rem 1rem 0rem 1rem;
    background-color: #fafbfc;
    border-radius: 3px;
  }

  .reply-list {
    margin-top: 10px;
    font-size: 13px;
    background-color: #fafafa;
    padding: 0 10px;
    color: #666;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
  }

  .reply-item--ops {
    border-bottom: none;
  }

  .reply-item {
    padding-bottom: 10px;
    padding-top: 10px;
    word-break: break-word;
  }
</style>
